<template>
  <!-- 英文 数字 键盘 -->
  <div class="allBoard" :style="location">
    <div class="plate_number_box">
      <div
        v-for="(item, index) in English_Number"
        :key="item.id"
        :class="numericClass(index)"
        :style="setMargin(item.id)"
        @click="checkEnglish_num(index)"
      >{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import English_Number from "./English_Number.js";
export default {
  name: "AllBoard",
  props: {
    // 位置
    location: {
      // 是否显示
      visible: {
        require: true,
        type: Boolean,
        default: false
      },
      type: Object,
      default: () => {
        return {
          left: "calc(50vw - 562px)",
          bottom: "10%"
        };
      }
    },

    // 初始化显示内容
    defaultValue: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // 当前点击键盘的下标
      checkedIndex: -1,
      // 当前点击过得键盘按键
      numArr: [],
      codes: "",
      // 键盘内的值
      English_Number: English_Number
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.checkedIndex = -1;
      }
    }
  },
  methods: {
    // 设置键盘按钮宽度
    setMargin(id) {
      switch (id) {
        case 38:
          return { marginLeft: "43px" };
        case 48:
          return { marginLeft: "95px" };
        case 56:
          return { marginRight: "30px" };
        case 57:
          return { marginLeft: "138px" };
        case 100:
          return { width: "120px" };
        default:
          break;
      }
    },
    // 清空选中数据
    emptyVal() {
      this.codes = "";
      this.numArr = [];
    },
    // 虚拟键盘
    checkEnglish_num(index) {
      this.checkedIndex = index;

      // 如果点击删除键，删除 numArr 的最后一个值
      if (English_Number[index].id === 99) {
        // 删除
        this.numArr.pop();
        this.codes = this.numArr.toString().replace(/,/g, "");

        this.$emit("select_key", this.codes, "open");
      } else if (English_Number[index].id === 100) {
        this.$emit("select_key", this.codes, "close");
      } else {
        // 把选中的值 push 到 numArr 内
        this.numArr.push(English_Number[index].name);
        this.codes = this.numArr.toString().replace(/,/g, "");

        this.$emit("select_key", this.codes, "open");
      }
    },
    // 键盘样式
    numericClass(index) {
      return this.checkedIndex === index ? "bg" : "";
    },
    // 确定提交
    submit() {
      this.$emit("select_key", this.codes, "cloes");
    }
  }
};
</script>

<style scoped lang="scss" src="./index.scss"></style>
